<script setup lang="ts">

import {computed, defineComponent} from "vue";
import {activeGlobalItem} from "@/components/formDesigner/select.ts";

defineComponent({
  name: "ElFormItemWrapper",
})


const emit = defineEmits(['update:activeItem'])
const props = defineProps({
  field: {
    type: Object,
    default: () => {
      return {}
    }
  },
})


const label = computed(() => {
  return props.field.options.label || ''
})

const handleClick = (e: Event) => {
  console.log("activeGlobalItem", activeGlobalItem.value)
  activeGlobalItem.value = props.field
  // 阻止事件冒泡
  e.stopPropagation()
  // 阻止事件向上传递
  e.preventDefault()
}



</script>

<template>
  <div>
    <el-form-item :class="{'form-item-border': activeGlobalItem?.id == field?.id}" :label="label" @click.stop="handleClick">
      <slot></slot>
    </el-form-item>
  </div>
</template>

<style scoped>

.form-item-border {
  border: 1px solid #409EFF;
  border-radius: 4px;
}

</style>
